<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>轮播图片</title>
    <style>
        .banner{width:1000px; height:323px;background:#060115; overflow:hidden; position:relative;}
        .banner>a{ display:block;width:100%; height:100%;}
        .banner>a>img{width:100%; height:100%;}
        #num{ position:absolute; bottom:0px; right:0px; cursor:pointer;}
        #num>span{width:40px; height:40px; line-height:40px;text-align:center; background-color:rgba(255,255,255,0.7); display:block; float:left;}
    </style>
    <script src="/store/js/jquery-1.12.1.min.js"></script>
</head>
<body>
<div class="banner">
    <a href="#1" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <a href="#2" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <a href="#3" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <a href="#4" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <a href="#5" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <a href="#6" target="_blank"><img src="/store/img/1.jpg" alt="热销产品"></a>
    <div id="num"></div>
</div>


<script>
    var i=0,str="",l=$('.banner>a').length;
    for(var i=0;i&lt;l;i++){
        str+='<span onclick="jump('+i+')">'+(i+1)+'</span>'
    }
    $('#num').html(str);
    play();
    function play(){
        $('.banner>a').fadeOut().eq(i).fadeIn(900);
        $('#num>span').css({"background-color":"rgba(255,255,255,0.7)","font-weight":"normal"}).eq(i).css({"background-color":"#FFF","font-weight":"bold"});
        i++;
        if(i>=l){i=0;}
        setTimeout(play,3000);
    }
    function jump(j){
        $('.banner>a').fadeOut().eq(j).fadeIn(900);
        $('#num>span').css({"background-color":"rgba(255,255,255,0.7)","font-weight":"normal"}).eq(j).css({"background-color":"#FFF","font-weight":"bold"});
        i=++j;
        if(i>=l){i=0;}
    }
</script>
</body>
</html>